<template>
  <!-- 装箱列表 -->
  <div>
    <div class="btn-box" v-if="showBtn">
      <div class="btn_left">
        <el-button type="text" @click="addNewData"> 刷新</el-button>
        <el-button type="text" @click="deleteData">删除</el-button>
      </div>
    </div>
    <div class="statistical-information">
      <span class="statistical-title">总件数：</span>
      <span class="statistical-number">{{ state.calculateSum.pkgsSum }}</span>
      <span class="statistical-title">总毛重：</span>
      <span class="statistical-number">{{ state.calculateSum.weightSum }}</span>
      <span class="statistical-title">总体积：</span>
      <span class="statistical-number">{{ state.calculateSum.volumSum }}</span>
    </div>
    <!--       :rules="boxTableDataRuls" -->
    <el-form
      :model="detailData"
      label-width="0"
      label-suffix="："
      ref="tableFormRef"
      :show-message="false"
      v-loading="tableLoading"
    >
      <el-table
        :data="detailData.containers"
        border
        max-height="400px"
        size="small"
        ref="table"
        row-key="id"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
        :row-style="selectRowClassName"
        highlight-current-row
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          v-if="showBtn"
        />
        <el-table-column align="center" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          align="center"
          label="箱号"
          width="120"
          show-overflow-tooltip
        >
          <template #header>
            <div class="table-header">箱号</div>
          </template>
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <!--          @change="checkContainerNo(scope.row)" -->
              <!-- @blur="
                    boxSelectBlur(scope.$index, scope.column.no, scope.row)
                  " -->
              <el-form-item
                :prop="'containers.' + scope.$index + '.containerNo'"
                :rules="state.formRules.containerNo"
                v-if="scope.$index >= 0"
              >
                <el-input
                  v-model="scope.row.containerNo"
                  size="small"
                  :ref="'containers' + scope.$index + scope.column.no"
                  @change="batchModifyBox(scope.row, 'containerNo')"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
            </div>
            <span v-else>
              {{ scope.row.containerNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="封号"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.sealNo"
                size="small"
                placeholder="请输入"
                @change="batchModifyBox(scope.row, 'sealNo')"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.sealNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="箱型"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span>
              {{ scope.row.containerSize }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="件数" show-overflow-tooltip>
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.pkgs"
                size="small"
                placeholder="请输入"
                @input="checkPkgs(scope.row, 'pkg')"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.pkgs }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="重量(KGS)" show-overflow-tooltip>
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.weight"
                placeholder="请输入"
                @input="checkWeight(scope.row)"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.weight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="体积(CBM)"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.measurement"
                placeholder="请输入"
                @input="checkMeasurement(scope.row)"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.measurement }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="称重方式"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-select
                v-model="scope.row.weighingType"
                placeholder="请选择"
                size="small"
              >
                <el-option value="SM1" label="SM1" />
                <el-option value="SM2" label="SM2" />
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.weighingType }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="称重地点"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.weighingLocation"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.weighingLocation }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="责任方"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.vgmDuty"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.vgmDuty }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="责任人签名"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.vgmPerson"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.vgmPerson }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="联系电话"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.vgmMobile"
                size="small"
                placeholder="请输入"
                @change="
                  scope.row.vgmMobile = validataPhoneAndTelephone(
                    scope.row.vgmMobile
                  )
                "
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.vgmMobile }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="联系邮箱"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div
              v-if="
                scope.$index === state.rowIndex &&
                scope.column.no === state.columnIndex
              "
            >
              <el-input
                v-model="scope.row.vgmEmail"
                size="small"
                placeholder="请输入"
                @change="
                  scope.row.vgmEmail = checkEmailIsRIght(scope.row.vgmEmail)
                "
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.vgmEmail }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="80" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="editRowData(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-dialog
      :title="state.dialogData.title"
      v-model="state.dialogData.show"
      width="1007px"
    >
      <el-form
        v-if="showBtn"
        :model="state.formData"
        :rules="state.formRules"
        label-width="80px"
        label-suffix="："
        ref="form"
        :show-message="false"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="箱号" prop="containerNo">
              <el-input
                v-model="state.formData.containerNo"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="箱型箱尺">
              <el-input
                v-model="state.formData.containerSize"
                size="small"
                placeholder="请输入"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="箱属">
              <div class="responsiveLayout">
                <el-input
                  v-model="state.formData.containerOwner"
                  style="width: 60%"
                  placeholder="请选择"
                  disabled
                >
                </el-input>
                <el-input
                  v-model="state.formData.tareWeight"
                  style="max-width: 40%; margin-left: 4px"
                  placeholder="请输入箱皮重"
                  disabled
                >
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="封号">
              <el-input
                v-model="state.formData.sealNo"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="装箱方式">
              <selectDown
                v-model:modelData="state.formData.packingType"
                placeholder="请选择"
                urlType="basedictdetail"
                urlQueryData="装箱方式"
                style="width: 100%"
                :labelSpaceBetween="false"
              >
              </selectDown>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="免用箱备注">
              <el-input
                v-model="state.formData.freeBoxRemark"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="箱单地点">
              <el-input
                v-model="state.formData.packingLocation"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 0px" :gutter="24">
          <el-col :span="16">
            <el-row>
              <el-col :span="24">
                <el-form-item label="码头">
                  <el-input
                    v-model="state.formData.wharf"
                    size="small"
                    disabled
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="仓库">
                  <el-input
                    v-model="state.formData.warehouse"
                    size="small"
                    disabled
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="车队">
                  <el-autocomplete
                    v-model="state.formData.motorcade"
                    :fetch-suggestions="queryTruckCode"
                    placeholder="请输入选择"
                    value-key="label"
                    disabled
                    :clearable="true"
                    style="width: 100%"
                    @select="truckCodeCodeSelect"
                  ></el-autocomplete>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="联系信息">
                  <div class="responsiveLayout">
                    <el-autocomplete
                      v-model="state.formData.motorcadeContact"
                      :fetch-suggestions="queryTruckCodeName"
                      placeholder="请选择联系人"
                      style="width: 50%"
                      disabled
                      value-key="linkName"
                      :clearable="true"
                    ></el-autocomplete>
                    <el-autocomplete
                      v-model="state.formData.motorcadeTelephone"
                      :fetch-suggestions="queryTruckCodePhone"
                      style="width: 50%; margin-left: 12px"
                      value-key="linkPhone"
                      disabled
                      placeholder="请选择联系方式"
                      :clearable="true"
                      @change="
                        state.formData.motorcadeTelephone =
                          validataPhoneAndTelephone(
                            state.formData.motorcadeTelephone
                          )
                      "
                    ></el-autocomplete>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="派车信息">
                  <div class="responsiveLayout">
                    <el-input
                      v-model="state.formData.packingContact"
                      placeholder="请输入联系人"
                      style="width: 33.33%"
                      disabled
                    ></el-input>
                    <el-input
                      v-model="state.formData.packingTelephone"
                      placeholder="请输入联系方式"
                      disabled
                      @change="
                        state.formData.packingTelephone =
                          validataPhoneAndTelephone(
                            state.formData.packingTelephone
                          )
                      "
                      style="width: 33.33%; margin-left: 12px"
                    ></el-input>
                    <el-input
                      v-model="state.formData.carNumber"
                      placeholder="请输入车牌号"
                      disabled
                      style="width: 33.33%; margin-left: 12px"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8" style="border-left: 1px solid #e7e7e7">
            <el-row>
              <el-col :span="24">
                <el-form-item label="提箱时间" label-width="60px">
                  <el-date-picker
                    v-model="state.formData.carryContainerTime"
                    type="date"
                    disabled
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="装箱时间" label-width="60px">
                  <el-date-picker
                    v-model="state.formData.packingTime"
                    type="date"
                    disabled
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="进港时间" label-width="60px">
                  <el-date-picker
                    v-model="state.formData.enterPortTime"
                    type="date"
                    disabled
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="装船时间" label-width="60px">
                  <el-date-picker
                    v-model="state.formData.loadingShipTime"
                    type="date"
                    disabled
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 0px">
              <el-col :span="24">
                <el-form-item label="还箱时间" label-width="60px">
                  <el-date-picker
                    v-model="state.formData.returnTime"
                    type="date"
                    disabled
                    placeholder="请选择"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <div class="line-separate"></div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="件数">
              <div class="responsiveLayout">
                <el-input
                  v-model="state.formData.pkgs"
                  placeholder="请输入"
                  @input="
                    state.formData.pkgs = validateNumber(state.formData.pkgs)
                  "
                >
                </el-input>
                <!-- <selectDown
                  v-model:modelData="formData.baozhuang"
                  placeholder="请选择包装单位"
                  style="width: 60%"
                  urlType="CsPackageType"
                  :fit-input-width="false"
                  :autoWidth="true"
                >
                </selectDown> -->
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="毛重">
              <el-input
                v-model="state.formData.weight"
                placeholder="请输入"
                @input="
                  state.formData.weight = validateOnlyNumberTwo(
                    state.formData.weight
                  )
                "
              >
                <!-- <template #append>KGS</template> -->
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体积">
              <el-input
                v-model="state.formData.measurement"
                placeholder="请输入"
                @input="
                  state.formData.measurement = validateOnlyNumberTwo(
                    state.formData.measurement
                  )
                "
              >
                <!-- <template #append>CBM</template> -->
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="称重方式">
              <el-select
                v-model="state.formData.weighingType"
                placeholder="请选择"
                size="small"
              >
                <el-option value="SM1" label="SM1" />
                <el-option value="SM2" label="SM2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="称重地点">
              <el-input
                v-model="state.formData.weighingLocation"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="VGM责任方">
              <el-input v-model="state.formData.vgmDuty" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="VGM责任人">
              <el-input v-model="state.formData.vgmPerson" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="VGM电话">
              <el-input
                v-model="state.formData.vgmMobile"
                placeholder="请输入"
                @change="
                  state.formData.vgmMobile = validataPhoneAndTelephone(
                    state.formData.vgmMobile
                  )
                "
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="VGM邮箱">
              <el-input
                v-model="state.formData.vgmEmail"
                placeholder="请输入"
                @change="
                  state.formData.vgmEmail = checkEmailIsRIght(
                    state.formData.vgmEmail
                  )
                "
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="container-table" v-else>
        <div class="item item-layout">
          <div class="label-item">箱号</div>
          <div class="content-item">{{ state.formData.containerNo }}</div>
        </div>
        <div class="item item-layout">
          <div class="label-item">箱型</div>
          <div class="content-item">
            {{ state.formData.containerSize }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">箱属箱皮重</div>
          <div class="content-item-split">
            <div style="width: 50%">{{ state.formData.containerOwner }}</div>
            <div style="width: 50%">{{ state.formData.tareWeight }}</div>
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">封号</div>
          <div class="content-item">
            {{ state.formData.sealNo }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">装箱方式</div>
          <div class="content-item">{{ state.formData.packingType }}</div>
        </div>
        <div class="item item-layout">
          <div class="label-item">免用箱备注</div>
          <div class="content-item">{{ state.formData.freeBoxRemark }}</div>
        </div>
        <div class="item item-layout" style="width: 100%">
          <div class="label-item">箱单地点</div>
          <div class="content-item">
            {{ state.formData.packingLocation }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">码头</div>
          <div class="content-item">
            {{ state.formData.wharf }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">提箱时间</div>
          <div class="content-item">
            {{
              state.formData.carryContainerTime
                ? $utils.formatDateTime(
                    state.formData.carryContainerTime,
                    'YYYY-MM-DD'
                  )
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">仓库</div>
          <div class="content-item">
            {{ state.formData.warehouse }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">装箱时间</div>
          <div class="content-item">
            {{
              state.formData.packingTime
                ? $utils.formatDateTime(
                    state.formData.packingTime,
                    'YYYY-MM-DD'
                  )
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">车队</div>
          <div class="content-item">
            {{ state.formData.motorcade }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">进港时间</div>
          <div class="content-item">
            {{
              state.formData.enterPortTime
                ? $utils.formatDateTime(
                    state.formData.enterPortTime,
                    'YYYY-MM-DD'
                  )
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">联系信息</div>
          <div class="content-item-split">
            <div style="width: 50%">{{ state.formData.motorcadeContact }}</div>
            <div style="width: 50%">
              {{ state.formData.motorcadeTelephone }}
            </div>
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">装船时间</div>
          <div class="content-item">
            {{
              state.formData.loadingShipTime
                ? $utils.formatDateTime(
                    state.formData.loadingShipTime,
                    'YYYY-MM-DD'
                  )
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">派车信息</div>
          <div class="content-item-split">
            <div style="width: 33.33%">{{ state.formData.packingContact }}</div>
            <div style="width: 33.33%">
              {{ state.formData.packingTelephone }}
            </div>
            <div style="width: 33.33%">
              {{ state.formData.carNumber }}
            </div>
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">还箱时间</div>
          <div class="content-item">
            {{
              state.formData.returnTime
                ? $utils.formatDateTime(state.formData.returnTime, 'YYYY-MM-DD')
                : ''
            }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">件数</div>
          <!-- <div class="content-item-split">
            <div style="width: 50%">{{ formData.pkgs }}</div>
            <div style="width: 50%">{{ formData.packingTelephone }}</div>
          </div> -->
          <div class="content-item">
            {{ state.formData.pkgs }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">毛重(KGS)</div>
          <div class="content-item">
            {{ state.formData.weight }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">体积(CBM)</div>
          <div class="content-item">
            {{ state.formData.measurement }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">称重方式</div>
          <div class="content-item">
            {{ state.formData.weighingType }}
          </div>
        </div>
        <div class="item item-layout" style="width: 66.66%">
          <div class="label-item">称重地点</div>
          <div class="content-item">
            {{ state.formData.weighingLocation }}
          </div>
        </div>
        <div class="item item-layout" style="width: 100%">
          <div class="label-item">VGM责任方</div>
          <div class="content-item">
            {{ state.formData.vgmDuty }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">VGM责任人</div>
          <div class="content-item">
            {{ state.formData.vgmPerson }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">VGM电话</div>
          <div class="content-item">
            {{ state.formData.vgmMobile }}
          </div>
        </div>
        <div class="item item-layout">
          <div class="label-item">VGM邮箱</div>
          <div class="content-item">
            {{ state.formData.vgmEmail }}
          </div>
        </div>
      </div>
      <template #footer v-if="showBtn">
        <span class="dialog-footer">
          <el-button
            @click="state.dialogData.show = false"
            type="default"
            size="small"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="state.dialogData.show = false"
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  defineComponent,
  inject,
  reactive,
  toRaw,
  ref,
  computed,
  defineExpose,
  watch
} from 'vue'
// import selectDown from './../components/selectDown.vue'
import selectDown from './selectDownNew.vue'
import childTable from './../components/docDetailBoxTableChild.vue'
import {
  validateOnlyNumberTwo,
  validateNumber,
  checkEmailType,
  validataPhoneAndTelephone
} from '@/utils/validate.js'
import docSelects from '../components/docSelects.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/public/request'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
// 路由和store相关
const Router = useRouter()
const Route = useRoute()
const store = useStore()

const props = defineProps({
  //详细数据
  detailData: {
    type: Object,
    default: () => {}
  },
  //是否处于编辑状态
  showBtn: {
    type: Boolean,
    default: false
  },
  //详细数据副本
  detailDataCopy: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['update:detailData', 'setBoxNumber'])
const tableFormRef = ref(null)
const table = ref(null)
const data = computed({
  get() {
    return props.detailData
  },
  set(value) {
    emits('update:detailData', value)
  }
})

defineExpose({
  getState: () => state
})

const state = reactive({
  // 用于随机生成id并存在当前已随机生成的数据
  randomIdArray: [],
  // 集装箱数据
  boxTableData: [],
  rowIndex: -1, //行索引
  columnIndex: -1, //列索引
  tableSelect: [],
  calculateSum: {
    pkgsSum: 0,
    weightSum: 0,
    volumSum: 0
  },
  tableLoading: false,
  dialogData: {
    title: '集装箱信息',
    show: false
  },
  // 用于autocompelte组件
  timeout: null,
  formRules: {
    containerNo: [{ required: true, message: '请输入箱号', trigger: 'change' }]
  },
  // 当前表格选中的列表数据
  currentRow: '',
  formData: {
    // 箱信息
    containerNo: '', //箱号
    sealNo: '', //封号
    containerSize: '', //箱型
    containerOwner: '', //箱属
    tareWeight: '', //箱皮重
    packingType: '', //装箱方式
    freeBoxRemark: '', //免用箱备注
    packingLocation: '', //箱单地点
    pkgs: '', //件数
    weight: '', //毛重
    measurement: '', //体积
    weighingType: '', //称重方式
    weighingLocation: '', //称重地点
    vgmDuty: '', //VGM责任方
    vgmPerson: '', //VGM责任人
    vgmMobile: '', //VGM电话
    vgmEmail: '', //VGM邮箱
    // 拖车信息
    wharf: '', //码头.
    warehouse: '', //仓库
    motorcade: '', //车队.
    motorcadeContact: '', //联系信息.
    motorcadeTelephone: '', //联系信息.
    packingContact: '', //联系信息.
    packingTelephone: '', //联系信息.
    carryContainerTime: '', //提箱时间.
    packingTime: '', //装箱时间.
    enterPortTime: '', //进港时间.
    loadingShipTime: '', //装船时间.
    returnTime: '', //还箱时间.
    carNumber: ''
  }
})
// 设置当前表所有操作验证必填项是否填写
async function validateBoxes() {
  let falg = true
  await tableFormRef.value.validate((res) => {
    falg = res
  })
  if (!falg) {
    ElMessage.error('请填写箱号')
  }
  return falg
}

// 检验邮箱是否正确
function checkEmailIsRIght(email) {
  if (!checkEmailType(email)) {
    return ''
  }
  return email
}

// 刷新
async function addNewData() {
  props.detailData.containers = []
  // let res = await request.get('/api/secontainer/query', {
  //   BookingId: Route.query.id
  // })
  let res = await request.get('/api/sebooking/querybyid', {
    id: Route.query.id
  })
  props.detailData.packings = res.data.packings
  props.detailData.containers = res.data.containers
  state.currentRow = ''
  emits('setBoxNumber', '')
}

//单元格被点击时会触发该事件
async function cellClick(row, column, cell, event) {
  // if (!props.showBtn) {
  //   table.value.setCurrentRow()
  //   return
  // }
  // 点击操作和复选框列，不做选中处理
  if (column.label != '操作' && column.no != 0) {
    let falg = true
    if (column.label !== '箱号') {
      falg = await validateBoxes()
    }
    if (falg) {
      for (let i = 0; i < props.detailData.containers.length; i++) {
        let t = props.detailData.containers[i]
        if (t.id == row.id && props.showBtn) {
          state.rowIndex = i
        }
      }
      if (props.showBtn) {
        state.columnIndex = column.no
      }
      row.rowIndex = state.rowIndex + 1
      table.value.setCurrentRow(row)
      emits('setBoxNumber', row)
      state.currentRow = row
    }
    if (!row.id) {
      if (state.currentRow) {
        for (const iterator of props.detailData.containers) {
          if (state.currentRow.id == iterator.id) {
            table.value.setCurrentRow(iterator)
          }
        }
      } else {
        table.value.setCurrentRow()
      }
      return
    }
    if (state.currentRow) {
      for (const iterator of props.detailData.containers) {
        if (state.currentRow.id == iterator.id) {
          table.value.setCurrentRow(iterator)
        }
      }
    } else {
      table.value.setCurrentRow()
    }
  }
  if (!state.currentRow) {
    table.value.setCurrentRow()
  }
}

//  / * 选择后的数据
function handleSelectionChange(val) {
  let arr = []
  for (let item of val) {
    let ret = toRaw(item)
    if (ret !== undefined) {
      arr.push(ret)
    }
  }
  state.tableSelect = arr
}

// 高亮勾选行
function selectRowClassName({ row, rowIndex }) {
  if (state.tableSelect.includes(row)) {
    return {
      'background-color': '#5A9CF819'
    }
  }
  return ''
}

// async function boxSelectBlur(rowIndex, columnIndex) {
//   await validateBoxes()
// }

async function checkContainerNo(row) {
  for (const iterator of props.detailData.containers) {
    if (iterator.containerNo == row.containerNo && iterator.id != row.id) {
      row.containerNo = ''
      ElMessage.warning('存在相同的箱号')
      break
    }
  }
}

// 批量修改箱号
function batchModifyBox(row, type) {
  if (type == 'containerNo') {
    checkContainerNo()
  }
  for (const iterator of props.detailData.packings) {
    if (iterator.containerId == row.id) {
      iterator.containerNo = row.containerNo
      iterator.sealNo = row.sealNo
    }
  }
  emits('setBoxNumber', state.currentRow)
}

// 编辑数据
async function editRowData(row) {
  state.formData = row
  state.dialogData.show = true
}

async function deleteData(row) {
  if (state.tableSelect.length > 0) {
    for (let i = state.tableSelect.length - 1; i >= 0; i--) {
      let deleteIndex = props.detailData.containers.findIndex(
        (t) => t == state.tableSelect[i]
      )
      if (deleteIndex > -1) {
        props.detailData.containers.splice(deleteIndex, 1)
      }
      //并删除对应的装载表的里对应箱号的数据，记录下需要删除的装载货物id
      let filterList = props.detailData.packings.filter((item) => {
        return item.containerId != state.tableSelect[i].id
      })
      props.detailData.packings = filterList
      if (state.currentRow.id == state.tableSelect[i].id) {
        emits('setBoxNumber', '')
        state.currentRow = ''
      }
    }
    table.value.clearSelection()
  } else {
    ElMessage.error('请至少选择一条数据')
  }
}

// 如果存在装载货物表总存在已有相同箱号的数据，将输入的件毛体重置会原来的
function checkPackingList(row) {
  let hasCargon = false
  let calculateSum = {
    pkgsSum: 0,
    weightSum: 0,
    volumSum: 0
  }
  for (const iterator of props.detailData.packings) {
    if (iterator.containerNo == row.containerNo) {
      hasCargon = true
      calculateSum.pkgsSum += iterator.pkgs ? parseInt(iterator.pkgs) : 0
      calculateSum.weightSum += iterator.grossWeight
        ? parseFloat(iterator.grossWeight)
        : 0
      calculateSum.volumSum += iterator.measurement
        ? parseFloat(iterator.measurement)
        : 0
    }
  }
  return {
    flag: hasCargon,
    calculateSum: calculateSum
  }
}

// 检查当前修改的数据是否存在装载的数据
function checkPkgs(row) {
  let checkObj = checkPackingList(row)
  if (checkObj.flag) {
    row.pkgs = checkObj.calculateSum.pkgsSum
    return
  }
  let pkgsFormat = validateNumber(row.pkgs)
  if (!pkgsFormat) {
    return
  }
}

function checkWeight(row) {
  let checkObj = checkPackingList(row)
  if (checkObj.flag) {
    row.weight = checkObj.calculateSum.weightSum
    return
  }
  let weightFormat = validateOnlyNumberTwo(row.weight)
  if (!weightFormat) {
    return
  }
}

function checkMeasurement(row) {
  let checkObj = checkPackingList(row)
  if (checkObj.flag) {
    row.measurement = checkObj.calculateSum.volumSum
    return
  }
  let weightFormat = validateOnlyNumberTwo(row.measurement)
  if (!weightFormat) {
    return
  }
}

function checkRight(row) {
  let haveCargo = false
  for (const item of props.detailData.packings) {
    if (row.containerNo == item.containerNo) {
      haveCargo = true
      break
    }
  }
  return haveCargo
}

// 监听计算汇总件毛体
watch(
  () => props.detailData.containers,
  (newValue, oldVal) => {
    state.calculateSum = {
      pkgsSum: 0,
      weightSum: 0,
      volumSum: 0
    }
    for (const iterator of props.detailData.containers) {
      state.calculateSum.pkgsSum += iterator.pkgs ? parseInt(iterator.pkgs) : 0
      state.calculateSum.weightSum += iterator.weight
        ? parseFloat(iterator.weight)
        : 0
      state.calculateSum.volumSum += iterator.measurement
        ? parseFloat(iterator.measurement)
        : 0
    }
  },
  { immediate: false, deep: true }
)

watch(
  () => props.showBtn,
  (newValue) => {
    if (!newValue) {
      state.columnIndex = -1
      state.rowIndex = -1
    }
  },
  { immediate: false, deep: false }
)
</script>

<style lang="scss" scoped>
@import '@/styles/business/business.scss';
.btn-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  border-radius: 2px;
  background: #f1f8ff;
  padding: 4px 16px;
  :deep(.el-button--small) {
    padding: 0;
  }

  :deep(.el-button + .el-button) {
    margin-left: 16px;
  }
}

:deep(.el-table) {
  .el-table__header th {
    background-color: #f7f8fa;
  }
  .cell {
    height: 32px;
    line-height: 32px;
  }

  .el-table__cell {
    padding: 0;
    height: 32px;
  }
  .el-input-number {
    width: 100%;
    .el-input__inner {
      text-align: left;
      padding: 0 8px;
    }
    .el-input-number__decrease {
      display: none;
    }
    .el-input-number__increase {
      display: none;
    }
  }
  .el-input__inner {
    padding: 0 8px;
  }
  .el-date-editor {
    .el-input__prefix {
      display: none;
    }
  }
  .el-table__body tr.current-row > td {
    background-color: rgba(90, 156, 248, 0.4) !important;
  }
}

:deep(.el-dialog) {
  padding: 0px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 16px;
  }

  .el-dialog {
    padding: 0px;
  }

  .el-form-item .el-form-item__label {
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: normal;
    line-height: 24px;
    letter-spacing: 0px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    text-align: center;
  }

  .el-form-item__label {
    padding: 0px;
  }

  .el-row {
    padding-right: 0px;
  }
}
.item {
  width: 33.33%;
}

.statistical-information {
  border-radius: 2px;
  background: #fef3e8;
  border: 1px solid #ffd1a0;
  padding: 4px 16px;
  margin-bottom: 8px;

  .statistical-title {
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
  }
  .statistical-number {
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    margin-right: 16px;
  }
}

.line-separate {
  background: #e7e7e7;
  height: 1px;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 12px;
}

// :deep(.el-checkbox) {
//   height: 100%;
// }
</style>
